<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<style>
			.mui-bar{
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
			}
			a , .mui-title{
				color:rgba(255,255,255,1);
			}
			body{
			background-color: #FFFFFF;	
			}
			.container_choose{
				width: 100%;
				position: relative;
				float: left;
				height:100px;
				background:rgba(245,245,245,1);
			}
			.container_choose>img{
				width: 22px;
				height: 22px;
				position: absolute;
				top: 25px;
				left: 25px;
			}
			.container_choose>input{
				width: calc(70% - 15px);
				background:rgba(255,255,255,1);
				border-radius:38px;
				border: none;
				padding-left: 35px;
				box-sizing: border-box;
				margin-left: 15px;
				margin-top: 15px;
			}
			input[type='text']{
				font-size:14px;
			}
			.container_choose>span{
				position: relative;
				float: right;
				padding-right: 15px;
				padding-top: 20px;
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
				border-radius:38px;
			}
			.choose_span{
				width:65px;
				height:38px;
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
				border-radius:38px;
				display: inline-block;
				text-align: center;
				line-height: 38px;
				margin-left: 15px;
			}
			.choose_span>span{
				font-size:14px;
				font-family:PingFang-SC-Regular;
				font-weight:bold;
				color:rgba(255,255,255,1);
			}
			.choose_div{
				padding-left: 17px;
				font-size:14px;
				font-family:PingFang-SC-Medium;
				font-weight:bold;
				color:rgba(152,152,152,1);
			}
			.choose_xiangq{
				width: 100%;
				position: relative;
				float: left;
				background: #FFFFFF;
				padding-left: 15px;
				padding-top: 20px;
				box-sizing: border-box;
			}
			.choose_xiangq>img{
				width:55px;
				height:55px;
				border-radius:50%;
				float: left;
			}
			.choose_xiangq>span{
				font-size:16px;
				font-family:PingFang-SC-Regular;
				font-weight:400;
				color:rgba(51,51,51,1);
				float: left;
				margin-top: 15px;
				padding-left: 15px;
				box-sizing: border-box;
			}
			.xiangq_span{
				width: 30px;
				height: 17px;
				background:linear-gradient(0deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
				float: left;
				line-height: 17px;
				text-align: center;
				margin-top: 18px;
				margin-left: 15px;
			}
			.xiangq_span>span{
				font-size:10px;
				font-family:PingFang-SC-Regular;
				font-weight:400;
				color:rgba(255,255,255,1);
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">选择赠送对象</h1>
		</header>
		<div class="mui-content">
			<div class="container_choose">
				<img src="../image/sou.png" alt="">
				<input type="text" name="" id="tiaojian" value="" placeholder="输入好友昵称" />
				<div class="choose_span">
					<span>搜索</span>
				</div>
				<div class="choose_div">群成员(23)</div>
			</div>
			<div id="yonghu">
				
			</div>
			<!-- <div class="choose_xiangq">
				<img src="../image/touxiangmy.png" alt="">
				<span  nameid="1">陈雪</span>
				<div class="xiangq_span">
					<span>群主</span>
				</div>
			</div>
			<div class="choose_xiangq">
				<img src="../image/touxiangmy.png" alt="">
				<span  nameid="1">陈雪1</span>
			</div>
			<div class="choose_xiangq">
				<img src="../image/touxiangmy.png" alt="">
				<span  nameid="1">陈雪2</span>
			</div>
			<div class="choose_xiangq">
				<img src="../image/touxiangmy.png" alt="">
				<span  nameid="1">陈雪35555</span>
			</div> -->
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.init();
		
			mui.plusReady(function () {
				var url = plus.storage.getItem('url');
				var user = plus.storage.getItem('user');
				user = JSON.parse(user);
				var web = plus.webview.currentWebview();
				var qunid = web.qunid;
				
				mui.post(url+'/juyou/Grouping/getqunchild',{token:user.token,qunid:qunid},function(res){
					// mui.toast(res.msg)
					if(res.code==200){
						var str = '';
						mui.each(res.data.data,function(i,v){
							if(v.qunzhu==1){
								str+='<div class="choose_xiangq">'+
										'<img src="'+v.user.touxiang+'" alt="">'+
										'<span  nameid="'+v.user.id+'">'+v.name+'</span>'+
										'<div class="xiangq_span">'+
											'<span>群主</span>'+
										'</div>'+
									'</div>';
							}else{
								str+='<div class="choose_xiangq">'+
										'<img src="'+v.user.touxiang+'" alt="">'+
										'<span  nameid="'+v.user.id+'">'+v.name+'</span>'+
									'</div>';
							}
							
						})
						
						$("#yonghu").append(str);
					}else{
						mui.toast(res.msg);
					}
				})
				
				
				
				
				mui('.container_choose').on('tap','.choose_span',function(){
					var tiaojian = $("#tiaojian").val();
					// if(!tiaojian){
					// 	mui.toast('请输入好友昵称');
					// 	return;
					// }
					mui.post(url+'/juyou/Grouping/searchchild',{token:user.token,qunid:qunid,tiaojian:tiaojian},function(res){
						if(res.code==200){
							var str = '';
							mui.each(res.data,function(i,v){
								if(v.qunzhu==1){
									str+='<div class="choose_xiangq">'+
											'<img src="'+v.user.touxiang+'" alt="">'+
											'<span  nameid="'+v.user.id+'">'+v.name+'</span>'+
											'<div class="xiangq_span">'+
												'<span>群主</span>'+
											'</div>'+
										'</div>';
								}else{
									str+='<div class="choose_xiangq">'+
											'<img src="'+v.user.touxiang+'" alt="">'+
											'<span  nameid="'+v.user.id+'">'+v.name+'</span>'+
										'</div>';
								}
							})
							$("#yonghu").empty();
							$("#yonghu").append(str);
						}else{
							mui.toast(res.msg);
						}
					})
				})
				
				
			mui(document).on("tap",".choose_xiangq",function(){
				var value=$(this).children("span").text();
				var  headimg=$(this).children("img").attr("src")
			    var  nameid=$(this).children("span").attr("nameid")
				var web=plus.webview.currentWebview().opener();   //这个是父级返回页面的对象
				mui.fire(web,'cusRefresh',{
					backname:value,
					backsrc:headimg,
					backid:nameid
				})
				mui.back()
			})	
			
			
			
			})
			
		</script>
	</body>

</html>
